<script type="text/javascript">

	var chart;
	jQuery(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'operation_report'
			},
			title: {
				text: 'Operations'
			},
			xAxis: {
				categories: [
				<% for operation in @operation_counts_date %>
					<%= "'#{operation.start_date}',"%>
				<%end%>
			]},
			labels: {
				items: [{
					html: 'Total operations',
					style: {
						left: '40px',
						top: '8px',
						color: 'black'				
					}
				}]
			},
			tooltip: {
				formatter: function() {
					var s;
					if (this.point.name) { // the pie chart
						s = ''+
							this.point.name +': '+ this.y +' operations';
					} else {
						s = ''+
							this.x  +': '+ this.y;
					}
					return s;
				}
			},
			labels: {
				items: [{
					html: 'Operations by status',
					style: {
						left: '40px',
						top: '8px',
						color: 'black'				
					}
				}]
			},
			series: [{
				type: 'spline',
				name: 'Total',
				data: [
				<% for operation in @operation_counts_date %>
					<%= "#{operation.count},"%>
				<%end%>
				],
				showInLegend: false,
			}, {
				type: 'pie',
				name: 'Total consumption',
				data: [
				<% for operation in @operation_counts_status %>
					<%= "['#{Operation::OPERATION_STATUS[operation.status]},',#{operation.count}],"%>
				<%end%>
				],
				center: [380, 50],
				size: 90,
				showInLegend: true,
				dataLabels: {
					enabled: false
				}
			}]
		});
		
		
	});

		
</script>

<div id='operation_report' style="width: 500px; height: 300px; margin: 0 auto"></div> 